<template>
  <div style="width: 100%">
    <mytitle :titleName="'应用广场'" :isMore="false" />
    <div class="check">
      <p>查</p>
      <div class="menu">
        <div
          class="menu-item"
          v-for="(item, index) in list1"
          :key="index"
          @click="handleImgCheck(item)"
        >
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
          <div class="right">
            <p>{{ item.title }}</p>
            <span>{{ item.remark }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="measuring">
      <p>测</p>
      <div class="menu">
        <div
          class="menu-item"
          v-for="(item, index) in list2"
          :key="index"
          @click="handleImgCheck(item)"
        >
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
          <div class="right">
            <p>{{ item.title }}</p>
            <span>{{ item.remark }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="fill">
      <p>填</p>
      <div class="menu">
        <div
          class="menu-item"
          v-for="(item, index) in list3"
          :key="index"
          @click="handleImgCheck(item)"
        >
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
          <div class="right">
            <p>{{ item.title }}</p>
            <span>{{ item.remark }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import mytitle from '@/components/MyTitle';
import img1 from '@/assets/images/yygc-c1.png';
import img2 from '@/assets/images/yygc-c2.png';
import img3 from '@/assets/images/yygc-c3.png';
import img4 from '@/assets/images/yygc-c4.png';
import img5 from '@/assets/images/yygc-c5.png';
import img6 from '@/assets/images/yygc-c6.png';

import img7 from '@/assets/images/yygc-ce1.png';
// import img8 from "@/assets/images/yygc-ce2.png";

import img9 from '@/assets/images/yygc-t1.png';
import img10 from '@/assets/images/yygc-t2.png';
import img11 from '@/assets/images/yygc-t3.png';
import img12 from '@/assets/images/yygc-t4.png';
import { useRouter } from 'vue-router';
const router = useRouter();

const list1 = ref([
  {
    img: img1,
    title: '找大学',
    remark: '随时查看全国2850所本科、高职、专科院校信息',
    url: '/college/searchCollege',
  },
  {
    img: img2,
    title: '查专业',
    remark: '了解本科、专科专业知识，以及就业方向',
    url: '/majorLibrary',
  },
  {
    img: img3,
    title: '看职业',
    remark: '了解热门职业，以及职业就业岗位信息',
    url: '/jorLibrary',
  },
  {
    img: img4,
    title: '分数线',
    remark: '根据教育考试院校发布录取位次计算',
    url: '/scoreLine',
  },
  {
    img: img5,
    title: '位次查询',
    remark: '根据教育考试院校发布录取位次计算',
    url: '/positionalQuery',
  },
  {
    img: img6,
    title: '提前批',
    remark: '艺术体育、军队、公安院校、司法、师范院校及招飞院校',
    url: '/tiQianPi',
  },
]);

const list2 = ref([
  {
    img: img7,
    title: '专业定位测评',
    remark: '从五大维度充分认知自己，依据测评结果推荐适合孩子的专业',
    url: '/appraisal',
  },
  // { img: img8, title: "360度标准测评", remark: '借助国际标准专业测评，帮您评估心理状况，探索内心世界', url: "/appraisal" },
]);

const list3 = ref([
  {
    img: img9,
    title: '一键填报',
    remark: '依据考生成绩，用户画像及个性化设置要求，生成个性化的志愿表',
    url: '/batchInfo',
  },
  {
    img: img10,
    title: '院校优先填报',
    remark: '依据院校历5年录取分数和位次，结合智能算法，推荐最佳院校',
    url: '/batchInfo',
  },
  {
    img: img11,
    title: '专业优先填报',
    remark: '依据专业喜好和成绩，推荐出开设此专业并可能上到的院校',
    url: '/batchInfo',
  },
  {
    img: img12,
    title: '职业优先填报',
    remark: '依据意向的行业/职业，帮你智能分析出哪些院校/专业更匹配',
    url: '/batchInfo',
  },
]);
const handleImgCheck = (item) => {
  router.push({ path: item.url });
};
</script>

<style lang="scss" scoped>
.check,
.measuring,
.fill {
  padding-left: 30px;
  margin-bottom: 10px;

  p {
    color: #333;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    margin-bottom: 15px;
  }

  .menu {
    margin-left: -10px;
    margin-right: -10px;
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      display: flex;
      flex-direction: row;
      padding: 20px 10px;
      width: 33.33%;
      cursor: pointer;

      .left {
        width: 64px;
        height: 64px;
        overflow: hidden;
        border-radius: 64px;
        transition: all 0.3s ease;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;
        padding-left: 10px;

        p {
          font-size: 18px;
          font-weight: 400;
          color: #212121;
          line-height: 25px;
          margin-bottom: 5px;
        }

        span {
          max-width: 192px;
          font-size: 12px;
          font-weight: 400;
          color: #4a4a4a;
          line-height: 18px;
        }
      }
    }

    .menu-item:hover {
      background: #fafafa;
    }

    .menu-item:hover .left {
      margin-top: -5px;
    }
  }
}
</style>
